Add MML esbuild plugin #54
Conversation
deej-io
force-pushed
the
deej/mml-dev-tools
branch
from
4ac6b52 to
c4f8d1c
Compare
| "import/no-unresolved": { | ||
| ignore: ['^mml:'] | ||
| }, |
There was a problem hiding this comment.
This just does not work for some reason... Which is why I've had to add the /*eslint ... */ directive at the top of the type script files that import MML documents...
…d more stable under concurrent rebuilds
deej-io
force-pushed
the
deej/mml-dev-tools
branch
from
6c7c5cd to
6732c30
Compare
packages/playground/build.ts
Outdated
| @@ -1,20 +1,249 @@ | |||
| import lockfile from "proper-lockfile"; | |||
There was a problem hiding this comment.
There's no default export lockfile in proper-lockfile.
This should probably be imported as
import { lockSync, unlockSync } from "proper-lockfile";
with the necessary adjustments where such methods are used.
packages/playground/build.ts
Outdated
| build.initialOptions.metafile = true; | ||
| const outdir = resolve(__dirname, build.initialOptions.outdir ?? "build"); | ||
|
|
||
| build.onStart(async () => { |
There was a problem hiding this comment.
async arrow func with no await inside (no methods returning promises in the block)
packages/playground/build.ts
Outdated
| }, | ||
| entryPoints: ["./src/playground/index.tsx"], | ||
| outdir, | ||
| outbase: "src", |
There was a problem hiding this comment.
We should force
treeShaking: true,
minify: true,
in the buildOptions (reduces the built duck example from 1MB to 143KB.
packages/playground/build.ts
Outdated
| @@ -28,7 +257,8 @@ const mode = args[0]; | |||
|
|
|||
| switch (mode) { | |||
| case buildMode: | |||
| esbuild.build(buildOptions).catch(() => process.exit(1)); | |||
| esbuild | |||
| .build(buildOptions).catch(() => process.exit(1)); | |||
| break; | |||
| case watchMode: | |||
There was a problem hiding this comment.
Watch mode will detect changes only if index.tsx is changed, but not when tsx MML documents are modified (like src/duck/index.tsx for example. We should probably monitor changes for those too, to re-trigger the build process.
packages/playground/build.ts
Outdated
| if (!(htmlPath in outputs)) { | ||
| delete outputs[jsPath] | ||
| const js = await fsp.readFile(jsPath, { encoding: "utf8" }); | ||
| const html = `<body></body><script>${js}</script>`; |
There was a problem hiding this comment.
We should probably brush off a few more bytes by removing the multi-line comments that the React build leaves in the built file
const cleanedJs = js.replace(/\/\*[\s\S]*?\*\//g, "");
const html = `<body></body><script>${cleanedJs}</script>`;
This PR adds an MML plugin that builds a React project and embeds the result into HTML files.
It uses a custom esbuild loader to ensure any references files are copied to the build directory, optionally re-writes the names, and then updates the import statements to contain a string for the document URL.
What kind of change does your PR introduce? (check at least one)
Does your PR fulfill the following requirements?